<template>
  <el-header class="header">
    <div class="header-left">
      <el-tag type="primary" class="logo-tag">大学生成果采集平台</el-tag>
      <span class="header-title">学生端</span>
      <span class="header-term">2024-2025-2</span>
    </div>
    <div class="header-right">
      <i class="el-icon-brush header-icon"></i>
      <i class="el-icon-bell header-icon"></i>
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar size="small" class="header-avatar">孙</el-avatar>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>
<style scoped>
.header {
  background: linear-gradient(90deg, #ffffff 0%, #f8f9fa 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  padding: 0 24px;
}
.header-left {
  display: flex;
  align-items: center;
}
.logo-tag {
  margin-right: 16px;
  font-size: 16px;
  background: linear-gradient(90deg, #7c3aed 0%, #9f7aea 100%);
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}
.header-title {
  font-size: 20px;
  font-weight: bold;
  margin-right: 24px;
  background: linear-gradient(90deg, #333 0%, #666 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header-term {
  color: #666;
  font-size: 16px;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
}
.header-right {
  display: flex;
  align-items: center;
}
.header-icon {
  font-size: 22px;
  margin-right: 24px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}
.header-icon:hover {
  color: #7ac143;
  transform: scale(1.1);
}
.header-avatar {
  background: linear-gradient(90deg, #7ac143 0%, #8edc5a 100%);
  color: #fff;
  margin-right: 8px;
  box-shadow: 0 2px 8px rgba(122, 193, 67, 0.2);
}
</style> 